<template>
  <div>

    <el-card style="width: 98%; border-radius: 10px; margin-left: 10px; margin-top: 10px" class="box-card">
      <div slot="header" class="clearfix">
        <el-tag type="success" effect="dark">组内所有对象</el-tag>
        <el-button style="float: right; padding: 3px 0" type="text" @click="getAllFaces">刷新组内对象</el-button>
      </div>
      <el-table
        :data="faceArray"
        style="width: 100%"
        :default-sort = "{prop: 'date', order: 'descending'}"
      >
        <el-table-column
          align="center"
          prop="faceId"
          label="人脸编号"
          sortable
          width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="faceToken"
          label="人脸标志"
          width="300">
        </el-table-column>
        <el-table-column
          width="160"
          align="center"
          prop="feature"
          label="人脸图片">
          <template slot-scope="scope">
            <el-image :src="'data:image/gif;base64,' + scope.row.feature"></el-image>
          </template>
        </el-table-column>
        <el-table-column
          width="140"
          sortable
          align="center"
          prop="width"
          label="人脸区域的宽度">
        </el-table-column>
        <el-table-column
          width="140"
          sortable
          align="center"
          prop="height"
          label="人脸区域的高度">
        </el-table-column>
        <el-table-column
          sortable
          width="190"
          align="center"
          prop="lefts"
          label="人脸区域离左边界的距离">
        </el-table-column>
        <el-table-column
          sortable
          width="190"
          align="center"
          prop="top"
          label="人脸区域离上边界的距离">
        </el-table-column>
        <el-table-column
          sortable
          width="160"
          align="center"
          prop="rotation"
          label="人脸框相对于竖直方向的顺时针旋转角">
        </el-table-column>
        <el-table-column
          width="160"
          align="center"
          prop="createTime"
          label="人脸注册时间">
        </el-table-column>
        <el-table-column
          fixed="right"
          width="120"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="toPreviewFace(scope.row)" type="cyan" size="small">大图预览</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getAllFaces"
      />
    </el-card>

    <el-dialog
      :visible.sync="dialogVisible"
      width="32%"
      >
      <el-image style="margin-left: 24px; height: 300px; width: 320px; margin-top: 10px" :src="'data:image/gif;base64,' + faceUrl"></el-image>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>

  import { getAllFaces } from '../../../api/face/face'

  export default {
    name: 'index',
    data() {
      return {
        faceUrl: '',
        dialogVisible: false,
        total: 0,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        faceArray: [],
      }
    },
    created() {
      this.getAllFaces()
    },
    methods: {
      toPreviewFace(data) {
        console.log(data)
        this.dialogVisible = true
        this.faceUrl = data.feature
      },
      getAllFaces() {
        getAllFaces(this.queryParams).then(res => {
          console.log(res)
          this.faceArray = res.rows
          this.total = res.total
        })
      }
    }
  }
</script>

<style scoped>

</style>
